<template>
  <div class="data-info-setting">
    <div class="gis-data-setting-item">
      <a-form-item
        label="数据类型"
        :label-align="'left'"
        :label-col="{ span: 3 }"
      >
        <a-radio-group
          v-model="gisTableSetting['tableDataGisType']"
          @change="changeTableDataGisType"
        >
          <a-radio value="point">点数据</a-radio>
          <a-radio value="region">面数据</a-radio>
        </a-radio-group>
      </a-form-item>
    </div>
    <div class="four-key-item">
      <a-form-item
        label="字段类型"
        :label-align="'left'"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 10 }"
      >
        <a-select
          v-model="gisTableSetting['columnGisType']"
          size="small"
          style="width: 115px;"
        >
          <a-select-option
            v-if="gisTableSetting['tableDataGisType'] === 'point'"
            value="latlng"
            >经纬度
          </a-select-option>
          <a-select-option value="region">行政区 </a-select-option>
        </a-select>
      </a-form-item>
    </div>
    <div v-if="isShowLatLngField" class="two-key-item">
      <a-form-item
        label="经度"
        :label-align="'left'"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 10 }"
      >
        <a-select
          v-model="gisTableSetting['lonCol']"
          size="small"
          style="width: 115px;"
        >
          <a-select-option
            v-for="list in getSemanticColumnList(['longitude'])"
            :key="list.name"
            :value="list.name"
            >{{ list.name }}</a-select-option
          >
        </a-select>
      </a-form-item>
    </div>
    <div v-if="isShowLatLngField" class="two-key-item">
      <a-form-item
        label="纬度"
        :label-align="'left'"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 10 }"
      >
        <a-select
          v-model="gisTableSetting['latCol']"
          size="small"
          style="width: 115px;"
        >
          <a-select-option
            v-for="list in getSemanticColumnList(['latitude'])"
            :key="list.name"
            :value="list.name"
            >{{ list.name }}</a-select-option
          >
        </a-select>
      </a-form-item>
    </div>
    <div v-if="isShowCityField" class="two-key-item">
      <a-form-item
        label="行政区"
        :label-align="'left'"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 10 }"
      >
        <a-select
          v-model="gisTableSetting['regionCol']"
          size="small"
          style="width: 115px;"
        >
          <a-select-option
            v-for="list in getSemanticColumnList(['city', 'province'])"
            :key="list.name"
            :value="list.name"
            >{{ list.name }}</a-select-option
          >
        </a-select>
      </a-form-item>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * gis 数据设置 component
 * @author Jinhui Hou
 */
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import DataUploadStore from '@/store/modules/data-upload'

@Component({
  components: {},
})
export default class GisDataSetting extends Vue {
  @Prop({ type: String }) activeTable!: string // 激活的数据表
  // table 类型的配置
  private get gisTableSetting(): { [key: string]: string } {
    return DataUploadStore.gisTableSetting
  }

  mounted() {
    this.completeGisColumn()
  }

  /**
   * 显示经纬度字段
   */
  private get isShowLatLngField() {
    return (
      this.gisTableSetting.tableDataGisType === 'point' &&
      this.gisTableSetting.columnGisType === 'latlng'
    )
  }

  /**
   * 显示行政区字段
   */
  private get isShowCityField() {
    return (
      (this.gisTableSetting.tableDataGisType === 'point' &&
        this.gisTableSetting.columnGisType === 'region') ||
      this.gisTableSetting.tableDataGisType === 'region'
    )
  }

  /**
   * 预览数据
   */
  public get datasetData() {
    return DataUploadStore.previewedDatasetOfGis
  }

  /**
   * 当前表的字段List
   */
  private get columnList(): {
    name: string
    type: string
    semantic: string
  }[] {
    const index =
      this.datasetData.length > 0
        ? this.datasetData.findIndex(
            (item: any) => item.fileName === this.activeTable
          )
        : 0
    return this.datasetData[index].head
  }

  @Watch('isShowLatLngField')
  handleLatLngShowChanged() {
    this.completeGisColumn()
  }

  @Watch('columnList', { deep: true })
  handleColumnListChanged() {
    this.completeGisColumn()
  }

  /**
   * 识别出确定的经度、纬度或行政区数据列时，自动填充表单对应内容
   */
  private completeGisColumn() {
    if (this.isShowLatLngField) {
      const longitudes: any = this.getSemanticColumnList(['longitude']).map(
        (ele) => ele.name
      )
      const latitudes: any = this.getSemanticColumnList(['latitude']).map(
        (ele) => ele.name
      )
      if (longitudes.length === 1) {
        ;[this.gisTableSetting.lonCol] = longitudes
      } else if (!longitudes.includes(this.gisTableSetting.lonCol)) {
        this.gisTableSetting.lonCol = ''
      }
      if (latitudes.length === 1) {
        ;[this.gisTableSetting.latCol] = latitudes
      } else if (!latitudes.includes(this.gisTableSetting.latCol)) {
        this.gisTableSetting.latCol = ''
      }
      this.gisTableSetting.regionCol = ''
    } else if (this.isShowCityField) {
      const regions: any = this.getSemanticColumnList(['city', 'province']).map(
        (ele) => ele.name
      )
      if (regions.length === 1) {
        ;[this.gisTableSetting.regionCol] = regions
      } else if (!regions.includes(this.gisTableSetting.regionCol)) {
        this.gisTableSetting.regionCol = ''
      }
      this.gisTableSetting.lonCol = ''
      this.gisTableSetting.latCol = ''
    } else {
      this.gisTableSetting.lonCol = ''
      this.gisTableSetting.latCol = ''
      this.gisTableSetting.regionCol = ''
    }
  }

  /**
   * 当数据类型是面数据时，设置字段类型只能选择行政区
   */
  private changeTableDataGisType() {
    if (this.gisTableSetting.tableDataGisType === 'region') {
      this.gisTableSetting.columnGisType = 'region'
    }
  }

  /**
   * 筛选特定语义的字段
   */
  private getSemanticColumnList(semanticList: string[]) {
    if (Array.isArray(semanticList) && semanticList.length > 0) {
      return this.columnList.filter((column: any) => {
        return semanticList.includes(column.semantic)
      })
    }
    return this.columnList
  }
}
</script>
<style lang="less" scoped>
.data-info-setting {
  display: flex;
  flex-direction: row;
  width: 100%;

  .gis-data-setting-item {
    width: 300px;

    // 定死左侧 label 宽度
    /deep/ .ant-form-item-label-left {
      width: 110px;
    }
  }

  .four-key-item {
    width: 250px;
    // 定死左侧 label 宽度
    /deep/ .ant-form-item-label-left {
      width: 80px;
    }
  }

  .two-key-item {
    width: 200px;
    // 定死左侧 label 宽度
    /deep/ .ant-form-item-label-left {
      width: 60px;
    }
  }

  /deep/ .ant-form-item {
    margin-bottom: 8px;
  }
}
</style>
